<template>
  <div class="container">
    <!-- <div class="title-container">
      <div class="header">
        通知公告 <span class="count">(共{{ announcements.length }}项)</span>
      </div>
      <div class="more-link"><router-link to="/announcement/list">更多 &gt;</router-link></div>
    </div> -->
    <el-table :data="announcements" style="width: 100%; padding-top: 5px;">
      <el-table-column min-width="200" align="left">
        <template slot="header" slot-scope="scope">
          <div class="header">
            通知公告 <span class="count">(共{{ announcements.length }}项)</span>
          </div>
        </template>
        <template slot-scope="scope">
          <router-link :to="'/announcement/view/' + scope.row.id" class="name-column"
            ><span class="mr-1">[{{ scope.row.announcementStatus }}]</span>
            <span class="mr-1">|</span>
            <span class="title flex-1">{{
              scope.row.announcementName
            }}</span></router-link
          >
        </template>
      </el-table-column>
      <el-table-column min-width="200" align="center">
        <template slot="header" slot-scope="scope">
          <span></span>
        </template>
        <template slot-scope="scope">
          <span>{{
              scope.row.announcementType
            }}</span>
        </template>

      </el-table-column>
      <el-table-column width="195" align="center">
        <template slot="header" slot-scope="scope">
          <div class="more-link">
            <router-link to="/announcement/list">更多 &gt;</router-link>
          </div>
        </template>
        <template slot-scope="scope">
          {{ scope.row.announcementDate | convertUTCToGMTString }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { fetchAnnouncementList } from "@/api/announcement";

export default {
  data() {
    return {
      listLoading: true,
      announcements: [],
    };
  },
  created() {
    this.getList();
  },
  filters: {
    convertUTCToGMTString(val) {
      if (!val) return "";
      const currentDate = new Date(val);
      const month =
        currentDate.getMonth() < 9
          ? `0${currentDate.getMonth() + 1}`
          : currentDate.getMonth().toString();
      return `${currentDate.getFullYear()}-${month}-${currentDate.getDate()}`;
    },
  },
  methods: {
    getList() {
      this.listLoading = true;
      fetchAnnouncementList().then((res) => {
        const dataList = res.data.length > 8 ? res.data.slice(0, 7) : res.data;
        const top = [];
        const normal = [];
        dataList.forEach((item) => {
          if (item.announcementStatus === "置顶") {
            top.push(item);
          } else {
            normal.push(item);
          }
        });
        this.announcements = [...top, ...normal];
        this.listLoading = false;
      });
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #fff;
}
.title-container {
  display: flex;
  justify-content: space-between;
  padding: 15px 10px 0;
}

.name-column {
  color: rgb(24, 144, 255);

}

.mr-1 {
  color: orange;
}

  .count {
      color: lightgray;
    }
  .more-link {
      text-align: end;
      color: rgb(24, 144, 255) !important;
    }
</style>
